<template>
	<view>
		<custom title="" mode="2" fixed="fixed" :hiddenBtn="true" border="0.5px solid rgba(0,0,0,0.1)">
			<template #right>

				<view @tap.stop="toPage('/pages/friend/publish')" class="iconfont icon-xiangji1 fs-40"
					style="transform: translateX(0rpx);"></view>
			</template>

			<view slot="left">

				<view class="flex fs-30 bold color-333333 nowrap" style="padding-left: 10rpx;">
					信友圈
				</view>
			</view>

		</custom>

		<template v-if="GXH">
			<scroll-view scroll-y @scrolltolower="onScrollToLower" style="height: 90vh;" refresher-enabled
				:refresher-triggered="isRefresh" @refresherrefresh="onscrollRefresh">
				<frienditem @delteOne="delteOne" :showMore="true" v-for="(item, i) in list" :key="i" :info="item"
					@refresh="refresh"></frienditem>
				<qq-footer :list="list" :show="true"></qq-footer>
			</scroll-view>
		</template>
		<template v-else>
			<view class="flex flex-x-y color-999999 fs-28" style="line-height: 50rpx;margin-top: 100rpx;">您已在设置关闭个性化推荐
			</view>
			<view class="flex flex-x-y color-999999 fs-28" style="line-height: 50rpx;">所以无法查看好友动态哦</view>
		</template>

		<fixed-line></fixed-line>
		<common></common>
	</view>
</template>

<script>
	import Custom from '../../components/custom/custom.vue';
	import frienditem from './frienditem.vue';
	import {
		timestampToTime
	} from '../../pages/course/utils'
	import {
		getFriendCircleList,
		getFriendCircleDetail
	} from './api/friendCircle'
	export default {
		components: {
			frienditem,
			Custom
		},
		data() {
			return {
				list: [],
				pageNumber: 1,
				is_null: false,
				first_request: true,
				hideArr: [],
				GXH: true,
				isRefresh: false,
			}
		},
		onLoad() {
			uni.$on('refresh', this.init)
			uni.$on('updateDetail', (id) => {
				this.refresh({
					id
				})
			})
			// this.getList()
			this.hideArr = uni.getStorageSync('hideArr') || [];
		},
		onShow() {
			this.init()
			let gxh = uni.getStorageSync('GXH');
			if (gxh !== '') {
				this.GXH = gxh;
			}
		},
		onUnload() {
			uni.$off('refresh')
			uni.$off('updateDetail')
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
			this.init();
		},
		onReachBottom() {
			this.getList(this.pageNumber);
		},
		methods: {
			// 滑动到底部时加载更多
			onScrollToLower() {
				console.log("滑动到底部时加载更多" + this.pageNumber);
				this.getList(this.pageNumber);
			},
			onscrollRefresh() {
				this.isRefresh = true;
				setTimeout(() => {
					this.init();
					this.isRefresh = false;
				}, 200);
			},
			// 更新单条朋友圈数据
			async refresh({
				id
			}) {
				const {
					data
				} = await getFriendCircleDetail({
					id
				})
				this.list = this.list.map(item => {
					if (item.id == id) {
						item = {
							...item,
							isLike: data.isLike,
							likeNames: data.likeNames,
							commentDtos: data.commentDtos
						}
					}
					return item
				})
			},
			init() {
				this.setData({
					list: [],
					pageNumber: 1,
					is_null: false,
				});
				this.getList();
				console.log('initxxxxxxxxxxxxxxxxxxxxx')
			},
			async getList(pageNumber = 1) {
				if (this.is_null) {
					return;
				}
				let info = {
					pageNumber,
					pageSize: 10,
				};
				const {
					data,
					status
				} = await getFriendCircleList(info);
				this.first_request = false;
				if (status == 200) {
					if (data && data.list.length > 0) {
						let list = data.list.map(item => {
							item.userInfo = {
								avatarUrl: item.avatarUrl,
								name: item.remark,
								time: timestampToTime(item.createTime, 'Mm')
							}
							return item
						})
						this.list = this.list.concat(list);
					}
					if (data.list.length < 10) {
						this.is_null = true;
					} else {
						this.pageNumber++;
					}
				}
			},
			delteOne(id) {
				this.hideArr.push(id);
				// this.list = this.list.filter(val => val.id != id);
				this.list = this.list
				uni.setStorage({
					key: 'hideArr',
					data: this.hideArr
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $pageColor;

	}
</style>